<template>
  <basic-dialog
    width="60%"
    :title="dialogTitle"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleClose"
  >
    <div class="sell_wrap">
      <h4>配置说明：</h4>
      <p>畅销商品是在核心商品的基础上进行逻辑配置。无销量的商品不可设置为畅销商品。</p>
      <p>购买频次，不统计倒票、退票。</p>
      <el-divider />
      <el-form :model="formData" :disabled="isView">
        <div class="row_wrap">
          <span>购买频次：</span>
          <el-input-number
            v-model="formData.month"
            size="mini"
            :controls=false
            :precision="0"
            :min="0"
            :max="12"
          />
          <span>个月</span>
        </div>
        <div class="row_wrap">
          <span>TOP排行：前</span>
          <el-input-number
            v-model="formData.percent"
            size="mini"
            :controls=false
            :min="0"
            :max="100"
          />
          <span class="warning_word">%</span>
          <span>的商品</span>
        </div>
        <div class="row_wrap">
          <span>每个核心品类下的畅销商品至少为1个，最多为</span>
          <el-input-number
            v-model="formData.maxAmount"
            size="mini"
            :controls=false
            :precision="0"
            :min="0"
          />
          <span class="warning_word">个</span>
        </div>
      </el-form>
      <div v-if="!isView" class="row_wrap footer_wrap">
        <el-button size="mini" @click="handleClose">取消</el-button>
        <el-button
          size="mini"
          :loading="btnLoading.export"
          @click="handleExport"
        >统计并导出SKU明细
        </el-button>
        <el-button
          type="primary"
          size="mini"
          :loading="btnLoading.submit"
          @click="handleSubmit"
        >配置完成
        </el-button>
      </div>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import { createExcelByExport, generateUuid, isResponseSuccess } from '@/utils/bizUtils';
import {
  saveHotSellRuleService,
  queryHotSellRule,
  exportHotSellSkuService
} from '@/api/commodity/commodityManage/productTagManage';
export default {
  components: {
    BasicDialog
  },
  props: {
    visible: { // 弹框开关
      type: Boolean,
      default: false
    },
    dialogType: { // 弹框类型，默认编辑
      type: String,
      default: 'edit'
    }
  },
  data () {
    return {
      formData: {},
      btnLoading: {
        export: false,
        submit: false
      }
    }
  },
  watch: {
    visible (val) {
      val && this.getConfigDetails()
    }
  },
  computed: {
    isView () {
      return this.dialogType == 'view'
    },
    dialogTitle () {
      if (this.isView) return '规则查看'
      return '规则配置'
    }
  },
  methods: {
    // 关闭弹框
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 统计并导出SKU明细
    async handleExport () {
      const data = {}
      const loadingFn = state => { this.btnLoading.export = state }
      const res = await exportHotSellSkuService(data, loadingFn)
      createExcelByExport({ excelTitle: `SKU明细_${generateUuid()}`, res })
    },
    // 配置完成
    async handleSubmit () {
      const data = { ...this.formData }
      const loadingFn = state => { this.btnLoading.submit = state }
      const res = await saveHotSellRuleService(data, loadingFn)
      if (isResponseSuccess(res)) {
        this.$message.success('配置成功！')
        this.handleClose()
        this.formData = {}
      }
    },
    // 获取配置详情
    async getConfigDetails () {
      const res = await queryHotSellRule({}, '.sell_wrap')
      if (res?.retData) {
        const { month, percent, maxAmount } = res.retData
        // 接口初始返回null，input-number值为undefined才会为空
        this.formData = {
          month: month ?? undefined,
          percent: percent ?? undefined,
          maxAmount: maxAmount ?? undefined
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.row_wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.warning_word {
  color: #F56C6C;
}
.footer_wrap {
  justify-content: end;
}
/deep/ .el-divider {
  margin: 10px 0;
}
/deep/ .el-input-number  {
  width: 65px;
  margin: 0 5px;
}
</style>
